import React from 'react';
import {FlatList, Platform, StyleSheet, Text, View} from 'react-native';
import {connect} from 'react-redux';
import {getRealSize, SummaryParams} from '../../utils';
import {SvgUri} from 'react-native-svg';
import ThemeStyles from '../../styles';
import Separator from '../../components/separator';
import {I18n} from '../../reducers/intl';

class ProductScreen extends React.Component {
  static navigationOptions = () => ({
    headerBackTitleStyle: Platform.OS === 'ios' && {
      height: 0,
      width: 0,
    },
    title: I18n.t('page.title.previewProduct'),
  });

  render() {
    const {form} = this.props;
    return (
      <View style={Styles.container}>
        <FlatList
          data={Object.values(form.products)}
          renderItem={({item}) => <ProductCard {...item} />}
          keyExtractor={item => item.pid}
          ItemSeparatorComponent={() => <Separator />}
        />
      </View>
    );
  }
}

const ProductCard = props => (
  <View style={Styles.cardContainer}>
    <View style={Styles.icon}>
      <SvgUri
        uri={props.product.url}
        fill={ThemeStyles.Color.primary.color}
        width={getRealSize(42)}
        height={getRealSize(42)}
      />
    </View>
    <View style={Styles.content}>
      <Text style={Styles.title} numberOfLines={2}>
        {props.product.name}
      </Text>
      <Text style={Styles.desc}>{SummaryParams(props)}</Text>
    </View>
  </View>
);

const mapStateToProps = state => ({
  user: state.user,
  form: state.orderForm,
});

export default connect(mapStateToProps, null)(ProductScreen);

const Styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  cardContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f7f7f7',
    borderRadius: getRealSize(4),
    marginHorizontal: getRealSize(15),
    padding: getRealSize(15),
  },
  icon: {
    height: getRealSize(72),
    width: getRealSize(72),
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    flex: 1,
    marginLeft: getRealSize(15),
    justifyContent: 'space-between',
  },
  title: {
    color: '#333',
    fontWeight: 'bold',
  },
  desc: {
    flex: 1,
    fontSize: getRealSize(12),
    fontWeight: '400',
    color: '#757575',
  },
});
